<template>
	<view>
		<view class="topImg">废旧金属收购登记系统注册</view>
		<view class="formClass">
			<u-form :model="form" ref="uForm">
				<u-form-item label="商户名称:" prop="name" label-width='150' class="labelStyle">
					<u-input v-model="form.name" placeholder="请输入站点名称" placeholder-style="font-size:24rpx;" />
				</u-form-item>
				<u-form-item label="账号:" prop="number" label-width='100' class="labelStyle">
					<u-input v-model="form.number" maxlength="11" placeholder="请输入手机号码" placeholder-style="font-size:24rpx;" />
				</u-form-item>
				<u-form-item label="地址:" prop="address" label-width='100' class="labelStyle">
					<u-input v-model="form.address" placeholder="请输入站点地址" placeholder-style="font-size:24rpx;" />
				</u-form-item>
				<u-form-item label="密码:" prop="password" label-width='100' class="labelStyle">
					<u-input v-model="form.password" placeholder="请输入8位以上密码" placeholder-style="font-size:24rpx;" />
				</u-form-item>
				<u-form-item label="营业执照(图片):" label-width='250' class="labelStyle">
					<view style="display: flex;flex-wrap: nowrap;align-items: center;">
						<view v-if="lists != ''">
							<image :src="lists"  style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
							<image src="../../static/delte.png" style="width: 30rpx;height: 30rpx;position: relative;right: 20rpx;bottom: 70rpx;" @tap="del(lists)" mode="aspectFit"></image>
						</view>
						<view @tap="upload" v-if="showUpload">
							<image src="../../static/upload.png" style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="门头照(图片):" label-width='200' class="labelStyle">
					<view style="display: flex;flex-wrap: nowrap;align-items: center;">
						<view v-if="listsMen != ''">
							<image :src="listsMen"  style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
							<image src="../../static/delte.png" style="width: 30rpx;height: 30rpx;position: relative;right: 20rpx;bottom: 70rpx;" @tap="delMen(lists)" mode="aspectFit"></image>
						</view>
						<view @tap="uploadMen" v-if="showUploadMen">
							<image src="../../static/upload.png" style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="场景照(图片):" label-width='200' class="labelStyle">
					<view style="display: flex;flex-wrap: nowrap;align-items: center;">
						<view v-if="listsChang != ''">
							<image :src="listsChang"  style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
							<image src="../../static/delte.png" style="width: 30rpx;height: 30rpx;position: relative;right: 20rpx;bottom: 70rpx;" @tap="delChang(lists)" mode="aspectFit"></image>
						</view>
						<view @tap="uploadChang" v-if="showUploadChang">
							<image src="../../static/upload.png" style="width: 100rpx;height: 100rpx;margin-right: 10rpx;" mode="aspectFit"></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="从业人数:" prop="workPeople" label-width='200' class="labelStyle">
					<u-input v-model="form.workPeople" placeholder="请输入从业人数" placeholder-style="font-size:24rpx;" />
				</u-form-item>
			</u-form>
		</view>
		<view class="register" @tap="register">注册</view>
		<view class="info">
			注册审核、忘记密码请拨打:18987007864
		</view>
		<view class="info1">上班时间:08:30-19:00</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js';
	export default {
		data() {
			return {
				//////////////营业执照列表
				lists: [],  
				showUpload: true,
				//////////////门头照列表
				listsMen: [],  
				showUploadMen: true,
				//////////////场景照列表
				listsChang: [],  
				showUploadChang: true,
				header: {
				  appToken: uni.getStorageSync('token'),
				},
				form: {
					name: '',
					number: '',
					address: '',
					password: '',
					workPeople: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入站点名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					},
					{
						pattern: /^[\u4e00-\u9fa5]{0,}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能输入汉字'
					},
					],
					number: [{
						required: true,
						message: '请输入手机号码',
						trigger: 'change'
					},
					{
						min: 11, 
						max: 11,
						message: '手机号最多11位', 
						trigger: 'change'
					},
					],
					address: [{
						required: true,
						message: '请输入站点地址',
						trigger: 'change'
					},
					{
						min: 5, 
						message: '地址不能少于5个字', 
						trigger: 'change'
					},
					{
						pattern: /[^0-9]+/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '地址不能为纯数字'
					},
					],
					password: [{
						required: true,
						message: '请输入8位以上密码',
						trigger: 'change'
					},
					{
						min: 8, 
						max: 16,
						message: '密码位8~16位', 
						trigger: 'change'
					},
					{
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '密码只能输入字母和数字'
					},
					],
				}
			}
		},
		onLoad() {

		},
		computed:{
			 action() {
				 return config.host + '/huishou/fast/fastDFSUpload'
			 }
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			del(url){
				this.lists = ''
				if(this.lists == ""){
					this.showUpload = true;
				}
			},
			upload(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: config.host + '/huishou/fast/fastDFSUpload', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								// this.lists.push(JSON.parse(uploadFileRes.data).item);
								this.lists = JSON.parse(uploadFileRes.data).item;
								console.log(this.lists,"0000=======")
								if(this.lists != ""){
									this.showUpload = false;
								}else {
									this.showUpload = true;
								}
				            }
				        });
				    }
				});
				
			},
			delMen(url){
				this.listsMen = ''
				if(this.listsMen == ""){
					this.showUploadMen = true;
				}
			},
			uploadMen(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePathsMen = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: config.host + '/huishou/fast/fastDFSUpload', //仅为示例，非真实的接口地址
				            filePath: tempFilePathsMen[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								// this.lists.push(JSON.parse(uploadFileRes.data).item);
								this.listsMen = JSON.parse(uploadFileRes.data).item;
								console.log(this.listsMen,"11111=======")
								if(this.listsMen != ""){
									this.showUploadMen = false;
								}else {
									this.showUploadMen = true;
								}
				            }
				        });
				    }
				});
				
			},
			delChang(url){
				this.listsChang = ''
				if(this.listsChang == ""){
					this.showUploadChang = true;
				}
			},
			uploadChang(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePathsChang = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: config.host + '/huishou/fast/fastDFSUpload', //仅为示例，非真实的接口地址
				            filePath: tempFilePathsChang[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								// this.lists.push(JSON.parse(uploadFileRes.data).item);
								this.listsChang = JSON.parse(uploadFileRes.data).item;
								console.log(this.listsChang,"22222=======")
								if(this.listsChang != ""){
									this.showUploadChang = false;
								}else {
									this.showUploadChang = true;
								}
				            }
				        });
				    }
				});
				
			},
			register() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.request({
							url: config.host + '/huishou/merchant/add', //接口地址。
							data: {
								name: this.form.name,
								password: this.form.password,
								account: this.form.number,
								phone: this.form.number,
								address: this.form.address,
								workPeople: this.form.workPeople,
								businessLicensePicture: this.lists.length == 0 ? this.lists.join(',') : this.lists,  //营业执照
								doorPhoto: this.listsMen.length == 0 ? this.listsMen.join(',') : this.listsMen,  //门头照
								scenePhoto: this.listsChang.length == 0 ? this.listsChang.join(',') : this.listsChang, //场景照
							},
							method: 'POST',
							header: {
								'content-type': 'application/json;charset=UTF-8'
							},
							success: (res) => {
								if (res.data.code == 200) {
									uni.showToast({
										title: '注册成功!',
										icon: 'none'
									});
									setTimeout(() => {
										uni.navigateTo({
											url: '../login/index'
										})
									}, 300);
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									icon: 'none',
									title: '网络异常,请稍后重试'
								});
							}
						});
					} else {
						
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import url("./css/index.css");
</style>
